<template>
  <div class="ai_input_box" ref="ai_box">   
      <div class="ai_editor_text" ref="display_box">

          <div v-if="!using" class="ai_none_point">
              <p id="ai_none_point_p">·本AI由千帆大模型提供 !</p>
              <div>知识型模型！</div>
              <div>
                <!-- 实际应该塞一个GRID -->
                  <video @pause="destory_Default" 
                  class="info-video" src="../../../../public/music_search.mp4" autoplay muted loop></video>
              </div>
          </div>

      </div>
      <div class="user_input_area">
          <textarea class="ai_editor_div" ref="display_input" placeholder="请输入您的描述！"></textarea>
          <div class="ai_send_btn_pos">
              <span class="iconfont icon-zhifeiji ai_send_btn" @click="textarea_change"></span>
          </div>
      </div>
  </div>
</template>

<script setup>
import { inject, onMounted, ref,computed } from 'vue'
import { up_load, get_data, use_qf } from '../../../../src/api/qianfan.js'
import { warning } from '@/static/js/alert.js'
let ai_box = ref()
let user_id = computed(() => (inject('user')()).value?.get_user()?.id || null)
let display_box = ref()
let display_input = ref()
let loading = false
let using = false
let ai_history_data = ref()
let current_id = null
let type = 1
const destory_Default = function (e) { e.target.play() }

const render_history = async function () {
  let father = document.querySelector("#display_history")
  if (father) father.innerHTML = ''
  if (!user_id.value) {
      father.innerHTML = '<div style="text-align:center;" ><p id="ai_none_point_p">请先登录！</p></div>'
      return
  }
  ai_history_data.value = await get_data(user_id.value)
  for (var i = ai_history_data.value.length - 1; i >= 0; i--) { 
      let list_ = document.createElement('div')
      let Id = ai_history_data.value[i]['id']
      let Tittle = ai_history_data.value[i]['tittle']
      let p_ = document.createElement('p') 
      p_.innerText = Tittle
      p_.classList.add('ai_history_p', `${Id}`)   
      p_.classList.add('ai_history_pre_history')
      p_.addEventListener('click', (e) => { 
          ai_history_data.value.forEach((item) => {
              if (item['id'] == Number(e.target.classList[1])) {
                  using = false        
                  current_id = item['id']
                  display_box.value.innerHTML = ''
                  display_box.value.innerHTML = item['Text']
                  type = 0
              }
          })     
      })
      list_.append(p_)   
      if (father) father.append(list_)
  }
}

const render_display = async function () { 
  let title = display_input.value.value
  const result = await use_qf(title)
  let p_ = document.createElement("p")
  p_.classList.add("ai_loading_p")
  p_.innerText = '描述：' + title
  display_box.value.appendChild(p_)
  let br_ = document.createElement("br")
  display_box.value.appendChild(br_)
  display_box.value.scrollTop = display_box.value.scrollHeight
  let data_ = '       ：' + result
  loading = false
  let div_ = document.createElement("div")
  div_.classList.add("ai_loading_div")
  div_.setAttribute('contenteditable', 'true')
  display_box.value.appendChild(div_) 
  let current = 2
  let last = 0
  let interval = setInterval(() => {
      let current_Data = data_.substring(last, current)
      last = current
      current++ 
      div_.innerText += current_Data 
      if (current >= data_.length) {
          clearInterval(interval)
          if (user_id.value) {
              var statu = up_load(user_id.value, {
                  'data': display_box.value.innerHTML,
                  'id': `${current_id}`
              })
              if (statu) {
                  render_history()
              } else { 
                  alert("状态错误！")
              }
          } else { 
              warning("登录账户支持历史功能！")
              console.log(user_id.value)
          }
      } 
      display_box.value.scrollTop = display_box.value.scrollHeight
  }, 100)
  let br__ = document.createElement("br")
  display_box.value.appendChild(br__)
  display_box.value.scrollTop = display_box.value.scrollHeight
  display_input.value.value = ''
  loading = false
}

const textarea_change = function () {
  if (!loading && !using) {
      if (display_input.value.value == "") { 
          alert("请先描述！")
          return
      }
      if (type == 1 && display_box.value.firstChild) {
          display_box.value.removeChild(display_box.value.firstChild)
      }
      using = true
      loading = true
      render_display()
  }
  else if (!loading && using) {
      loading = true
      render_display()
  } else { 
      alert("加载中...")
  }
}

onMounted(() => { 
  render_history()
})
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.ai_input_box {
  width: 80vw;  
  max-width: 900px;
  margin: 48px auto 0 auto;
  border-radius: 12px;
  padding: 28px 20px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 440px;
}

.ai_editor_text {
  height: 80%;
  border-radius: 8px;
  padding: 22px 16px 16px 16px;
  overflow-y: auto;
  font-size: 16px;
  color: #232943;
  margin-bottom: 10px;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.ai_none_point {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #7d8599;
  gap: 12px;
}
#ai_none_point_p {
  font-size: 17px;
  font-weight: 600;
  color: #4676fa;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.info-video{
  width: 500px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(80,90,120,0.08);
}

.list_ai {
  margin-top: 14px;
  width: 220px;
  height: 110px;
  border-radius: 10px;
  background: #f1f3fa;
  border: 1px solid #e6e9f0;
  object-fit: cover;
  box-shadow: 0 1px 8px 0 rgba(126,133,152,0.10);
}

.user_input_area {
  display: flex;
  align-items: flex-end;
  position: relative;
  margin-top: 6px;
  width: 100%;
  min-height: 52px;
}

.ai_editor_div {
  width: 100%;
  min-height: 80px;
  max-height: 180px;
  resize: none;
  border-radius: 8px;
  padding: 14px 52px 14px 16px;
  font-size: 17px;
  color: #232943;
  background: #fff;
  outline: none;
  transition: border-color 0.2s;
  box-shadow: 0 2px 6px 0 rgba(126,133,152,0.10);
}

.ai_editor_div:focus {
border-color: #4676fa;
}

.ai_send_btn_pos {
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
z-index: 2;
}

.ai_send_btn {
font-size: 30px;
color: #4676fa;
cursor: pointer;
transition: color 0.18s;
user-select: none;
padding: 2px;
}

.ai_send_btn:hover {
color: #395cb9;
}

.ai_loading_p {
color: #1b1d26;
font-weight: 500;
margin-bottom: 8px;
font-size: 16px;
}

.ai_loading_div {
  padding: 12px 12px 12px 0;
  background: #f7faff;
  border-radius: 8px;
  font-size: 16px;
  color: #2450a6;
  font-family: 'Fira Mono',monospace;
  margin-bottom: 8px;
  min-height: 36px;
  outline: none;
  transition: background 0.2s;
  overflow-x: auto;
}

.ai_loading_div[contenteditable="true"]:focus {
background: #eaf0ff;
}

::-webkit-scrollbar {
  width: 8px;
  background: #f7f7fa;
  border-radius: 6px;
}
::-webkit-scrollbar-thumb {
  background: #e7eaf2;
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
background: #d2d7e6;
}
</style>